<template>
  <div class="CallRecord">
    <el-card>
      <!-- 搜索条件 -->
      <div class="search">

        <el-date-picker v-model="dateNumber" size="small" type="daterange" start-placeholder="开始时间"
          end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" @change="ChangeData2">
        </el-date-picker>

        <el-select size="small" v-model="callRecordData.apiKey" clearable placeholder="接口" class="GlTyCss">
          <el-option v-for="apiky in ApiKeys" :key="apiky.value" :label="apiky.label" :value="apiky.value">
          </el-option>
        </el-select>

        <el-select size="small" v-model="callRecordData.status" clearable placeholder="是否计费" class="GlTyCss">
          <el-option v-for="itShop in Shopoptions" :key="itShop.value" :label="itShop.label" :value="itShop.value">
          </el-option>
        </el-select>
        <el-select size="small" v-model="callRecordData.result_value" clearable placeholder="核验结果" class="GlTyCss">
          <el-option v-for="Result in ResultPage" :key="Result.value" :label="Result.label" :value="Result.value">
          </el-option>
        </el-select>
        <el-input size="small" placeholder="订单号" prefix-icon="el-icon-notebook-1" v-model="callRecordData.orderId"
          class="GlTyCssT" clearable>
        </el-input>
        <el-button type="primary" @click="GetCallRecord()" size="small">查询</el-button>
      </div>
      <!-- 搜索条件 -->

    </el-card>
    <el-card>
      <el-table :data="CallRecordList.records" border style="width: 100%" v-loading="loading">
        <el-table-column prop="username" label="账户" width="180">
        </el-table-column>

        <el-table-column prop="apiKey" label="调用接口" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.apiKey == 'SANYS3J'">三要素</span>
            <span v-else-if="scope.row.apiKey == 'SANYS2HX'">二要素号姓</span>
            <span v-else-if="scope.row.apiKey == 'SANYS2HZ'">二要素号证</span>
            <span v-else>{{ scope.row.apiKey }}</span>
          </template>
        </el-table-column>
        <el-table-column label="核验参数" align="center">
          <template slot-scope="scope">
            <el-tooltip placement="bottom">
              <b class="pointerClass">...</b>
              <div slot="content">
                <span>姓名:{{ scope.row.params.name }}</span><br />
                <span>手机号:{{ scope.row.params.mdn }}</span><br />
                <span>证件号:{{ scope.row.params.idNo }}</span>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="orderId" label="订单号">
        </el-table-column>
        <el-table-column prop="createTime" label="时间">
        </el-table-column>
        <el-table-column prop="" label="计费" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">收费</span>
            <span v-else-if="scope.row.status == 0">不收费</span>
            <span v-else>~</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="结果描述" width="130">
          <template slot-scope="scope">
            <span v-if="scope.row.result_value == 'T'">一致</span>
            <span v-else-if="scope.row.result_value == 'F'">不一致</span>
            <span v-else-if="scope.row.result_value == 'E'">查无</span>
            <span v-else-if="scope.row.status == 0">{{ scope.row.message }}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" plain>复核</el-button>
            <br>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
        :total="CallRecordList.total">
      </el-pagination>
      <!-- 分页 -->

    </el-card>
  </div>
</template>

<script>
import { getCallRecordData } from "@/api/elements";
export default {
  data() {
    return {
      loading: true,
      labelPosition: 'top',
      // 查询条件
      callRecordData: {
        beginTime: "", //开始时间
        endTime: "", //结束时间
        apiKey: "", //接口类别
        status: "", //状态
        result_value: "", //结果值
        orderId: "", //订单ID
      },
      page: 1, //页码
      size: 10, //每页显示条数
      dateNumber: "",
      CallRecordList: [],
      Shopoptions: [
        {
          value: 0,
          label: '不计费'
        }, {
          value: 1,
          label: '计费'
        },

      ],
      ResultPage: [
        {
          value: "T",
          label: '一致'
        },
        {
          value: "F",
          label: '不一致'
        },
        {
          value: "E",
          label: '查无'
        }
      ],
      ApiKeys: [
        {
          value: "SANYS3J",
          label: '三要素'
        },
        {
          value: "SANYS2HX",
          label: '二要素号姓'
        },
        {
          value: "SANYS2HZ",
          label: '二要素号证'
        }
      ]
    };
  },
  created() {
    this.GetCallRecord()
  },
  methods: {
    async GetCallRecord() {
      this.loading = true
      getCallRecordData(this.page, this.size, this.callRecordData).then(res => {

        if (res.code === 200) {
          this.CallRecordList = res.data.value
          this.loading = false
          this.$message({
            message: res.status,
            type: 'success',
            duration: 1000
          });
        } else {
          this.loading = false
          this.$message({
            message: res.message,
            type: 'error',
            duration: 1000
          });
        }

      })
    },

    // 分页查询
    async handleSizeChange(val) {
      this.size = val;
      this.GetCallRecord();
    },
    async handleCurrentChange(val) {
      this.page = val;
      this.GetCallRecord();
    },
    //时间选择器
    ChangeData2(e) {
      if (e) {
        this.callRecordData.beginTime = e[0]
        this.callRecordData.endTime = e[1]
      } else {
        this.callRecordData.endTime = ''
        this.callRecordData.beginTime = ''
      }
    }
  },
};
</script>

<style scoped>
.GlTyCss {
  width: 180px;
  margin: 5px;
  box-sizing: border-box;
}

.GlTyCssT {
  width: 230px;
  margin: 5px;
  box-sizing: border-box;
}

.pointerClass {
  cursor: pointer;
}
</style>
